<template>
	<view>
		<!-- <order-info :order="order"></order-info> -->
		<view class="item">
			<view style="display: inline-flex; justify-content: flex-end;">
				<text class="title">
					订单号：{{order.orderNo}}
				</text>
				<view class="btn-detail" style="background-color:#FFFFFF;display: flex;flex-direction: row-reverse;">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

			<view class="text-line">
				<text class="text-name">客户姓名:</text>
				<text class="text-value">{{order.memberName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">客户类型:</text>
				<text class="text-value">{{order.memberType|customerType}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">联系方式:</text>
				<text class="text-value">{{order.memberPhone|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">预定车辆:</text>
				<text class="text-value">{{order.modelName|filterNull}}</text>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">实际取车时间:</text>
					<text class="text-value">{{shortBasic.actualStartTime|filterNull}}</text>
				</view>
			</view>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">实际还车时间:</text>
					<text class="text-value">{{shortBasic.actualEndTime|filterNull}}</text>
				</view>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">违章押金:</text>
					<text class="text-value">{{shortBasic.deposit|filterNull}}元</text>
				</view>
			</view>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">押金扣款合计:</text>
					<text class="text-value">{{detail.deductionsAmount|filterNull}}元</text>
				</view>
				<button v-if="detail.deductionsAmount>0" class="uni-button" size="mini" type="primary" @click="showAmountDetail=true">明细</button>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">抵扣金额:</text>
					<text class="text-value">{{depositDeduct|filterNull}}元</text>
				</view>
			</view>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">补缴金额:</text>
					<text class="text-value">{{payTheCostSum|filterNull}}元</text>
				</view>
			</view>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">应退金额:</text>
					<text class="text-value">{{depositRefund|filterNull}}元</text>
				</view>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>
			<view class="text-line">
				<view class="flex-item">
					<text class="text-name">上传凭证:</text>
					<view class="text-value">
						<sr-upload maxCount="1" @uploadResult="ImageChange"></sr-upload>
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="showAmountDetail" @close="showAmountDetail=false">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center">扣款原因</uni-th>
					<uni-th align="center">扣款金额</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in detail.xcxSettlementList" :key="index">
					<uni-td align="center">{{ item.deductionsFor }}</uni-td>
					<uni-td align="center">{{ item.deductionsAmount }}</uni-td>
				</uni-tr>
			
			</uni-table>
		</u-popup>



		<button type="info" class="sub-btn" v-if="order.wzbj>0" @click="doDepositRefund(5)">确认补缴</button>
		<button type="info" class="sub-btn" v-else @click="doDepositRefund(6)">确认退款</button>
	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue';
	import * as api from '@/api/order-api.js';
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				order: {},
				pingzheng:"",
				showAmountDetail:false,
				detail: {
					settlementList: [],
					xcxSettlementList:[]
				},
				shortBasic: {
					deposit: 0
				}
			}
		},
		    computed: {
		      depositDeduct() {
		        let sum=0;
		        for(let item of this.detail.xcxSettlementList){
		          sum+=Number(item.deductionsAmount);
		        }
		        return sum<=this.shortBasic.deposit?sum:this.shortBasic.deposit
		      },
		      payTheCostSum() {
		        let sum=0;
		        for(let item of this.detail.xcxSettlementList){
		          sum+=Number(item.deductionsAmount);
		        }
		        return sum<=this.shortBasic.deposit?0:sum-this.shortBasic.deposit
		      },
		
		      depositRefund() {
		        let sum=0;
		        for(let item of this.detail.xcxSettlementList){
		          sum+=Number(item.deductionsAmount);
		        }
		        return sum<=this.shortBasic.deposit?this.shortBasic.deposit-sum:0
		      },
		    },
		methods: {
			ImageChange(data) {
				this.pingzheng = data[0]
			},
			doDepositRefundDetail() {
				api.IllegalProcessing(this.order.orderNo).then(response => {
					this.detail = response.data || {};
					this.shortBasic = response.data.shortBasic || {};
					this.loading = false
				});
			},
			doDepositRefund(type) {
				if(!this.pingzheng){
					this.$u.toast('请上传支付凭证')
					return
				}
				uni.showLoading({
					title:"提交中...",
					mask:true
				});
				api.addVoucher({
					bizType: type,
					bizId: this.order.orderNo, // 订单编号
					url: this.pingzheng, // 支付凭证
				}).then(r=>{
					api.IllegalDepositRefund(this.order.orderNo,r.data.id).then(res => {
						uni.hideLoading();
						uni.$emit("refreshOrder");
						this.$u.toast('提交成功')
						uni.navigateBack({
							animationDuration: 300
						})
					})
				})
				
			}
		},
		onLoad: function(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.doDepositRefundDetail();
		},
	}
</script>

<style>
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		padding-bottom: 120rpx;

	}

	/* 	.text-name {
		width: 155rpx;
		color: #303133;
		font-size: 15px;
	} */

	.text-line {
		margin: 0 20rpx 20rpx 20rpx;
	}

	.item {
		margin-bottom: 120rpx;
	}

	.flex-item {
		flex: 1
	}

	.checkbox-box {
		padding: 20rpx;
	}

	.checkbox-item {
		min-width: 165rpx;
		transform: scale(0.9)
	}
</style>
